<template>
<div>
    <Header></Header>
    <div id="body">
        <div id="title">
            <div style="margin: auto 0">置顶课程</div>
            <el-button type="primary" style="margin-left: 900px" icon="el-icon-plus" @click="addOrJoinConfirm=true">
                创建/加入课程
            </el-button>
            <el-button type="primary" icon="el-icon-plus">
                快速发布活动
            </el-button>
        </div>
        <div id="my_class">
            <div v-for="(item) in this.courseDetail" v-bind:key="item.id" class="course">
                <div class="more_page" v-show="morePageShow[item.id]">
                    <div>编辑</div>
                    <div @click="dropCourse(item.id)">删除</div>
                    <div>归档</div>
                    <div>复制课程</div>
                    <div>打包下载</div>
                    <div>转让</div>
                </div>
                <div class="course_img">
                    <strong @click="enterCourse(item.id)">
                        {{item.courseName}}
                    </strong>
                    <div class="class_name">
                        {{item.className}}
                    </div>
                    <div class="class_code">
                        加课码{{item.courseCode}}
                    </div>
                </div>
                <div class="course_work">
                    <div class="course_work_title">
                        近期作业
                    </div>
                    <div class="course_work_body">
                        无
                    </div>
                </div>
                <div class="course_bottom">
                    <div class="owner_head">

                    </div>
                    <div class="owner_name">
                        {{item.creatorId}}
                    </div>
                    <div class="cancel_top">
                        取消置顶
                    </div>
                    <div class="course_bottom_more" @click="showMore(item.id)">
                        更多
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="addOrJoinConfirm" v-if="addOrJoinConfirm">
        <div @click="addCourseShow">创建课程</div>
        <div @click="joinCourseShow">加入课程</div>
    </div>

    <el-dialog :visible="joinCourseDialog" id="joinCourseDialog" title="加入课程">
        <span>
            <el-input placeholder="请输入课程加课验证码" v-model="joinCode"></el-input>
        </span>
        <span slot="footer">
            <el-button @click="joinCourseDialog=false">取消</el-button>
            <el-button @click="joinCourse" type="primary">确定</el-button>
        </span>
    </el-dialog>

    <el-dialog :visible="addCourseDialog" id="addCourseDialog" title="新建课程">
        <span>
            <label>课程名称：<input placeholder="请输入课程名称" class="input" v-model="courseName" /></label><br><br><br>
            <label>班级名称：<input placeholder="请输入班级名称" class="input" v-model="className" /></label>
        </span>
        <span slot="footer">
            <el-button @click="addCourseDialog=false">取消</el-button>
            <el-button @click="addCourse" type="primary">创建</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import Header from "../components/Header";
import axios from 'axios'
export default {
    name: "Index",
    components: { Header },
    data() {
        return {
            user: {
                "id": null
            },
            course: null,
            mailOrTel: null,
            courseDetail: [],
            img_path: "../assets/IndexCourseImage/",
            addOrJoinConfirm: false,
            addCourseDialog: false,
            joinCourseDialog: false,
            joinCode: null,
            courseName: null,
            className: null,
            year: null,
            grade: null,
            morePageShow: []
        }
    },
    methods: {
        getUserData: function () {
            this.mailOrTel = sessionStorage.getItem("username")
            axios.get("http://localhost:8080/user/get_user_by_mail_or_tel", { params: { "value": this.mailOrTel } }).then((res) => {
                this.user = res.data[0]
                console.log(this.user.course.split("/"))
                this.course = this.user.course.split("/")
                if (this.course[this.course.length - 1] === "") {
                    this.course.pop()
                }
            })
        },
        getCourseData: function () {
            let list = new Array(3)
            for (let i = 0; i < this.course.length; i++) {
                axios.get("http://localhost:8080/course/get_course_by_id", { params: { "id": this.course[i] } }).then((res) => {
                    list.push(res.data)
                    this.morePageShow[res.data.id]=false
                    this.courseDetail.push(res.data)
                })
            }
            this.morePageShow = JSON.parse(JSON.stringify(this.morePageShow))
            this.courseDetail = JSON.parse(JSON.stringify(this.courseDetail))
        },
        enterCourse: function (id) {
            window.location.href = "./course?id=" + id;
        },
        addCourseShow: function () {
            this.addOrJoinConfirm = false
            this.addCourseDialog = true
        },
        joinCourseShow: function () {
            this.addOrJoinConfirm = false
            this.joinCourseDialog = true
        },
        addCourse: function () {
            axios.get("http://localhost:8080/course/add_course", {
                    params: {
                        "creatorId": this.user.id,
                        "courseName": this.courseName,
                        "className": this.className
                    }
                })
                .then((res) => {
                    console.log(res.data)
                    let response = res.data
                    if (response === "add failed") {
                        this.$message("添加课程失败")
                    } else if (response === "ok") {
                        this.$message("添加成功")
                    } else {
                        this.$message("未知错误")
                    }
                })
            this.addCourseDialog = false
        },
        joinCourse: function () {
            axios.get("http://localhost:8080/course/join_course", {
                    params: {
                        "courseCode": this.joinCode,
                        "studentId": this.user.id
                    }
                })
                .then((res) => {
                    console.log(res.data)
                    let response = res.data
                    if (response === "can not find course by code") {
                        this.$message("该加课码不存在或已失效")
                    } else if (response === "you have joined the course") {
                        this.$message("你已加入了此课程")
                    } else if (response === "failed") {
                        this.$message("加入课程失败")
                    } else if (response === "ok") {
                        this.$message("加入课程成功")
                    } else {
                        this.$message("未知错误")
                    }
                })
            this.joinCourseDialog = false
            this.getUserData()
        },
        showMore:function (index) {
            console.log(index)
            console.log(this.morePageShow[index])
            this.morePageShow[index] = !this.morePageShow[index]
            this.morePageShow.push()
        },
        dropCourse:function (index) {
            console.log(this.user.id)
            axios.get("http://localhost:8080/course/drop_out_course",
                {
                    params:{
                        "studentId": this.user.id,
                        "courseId": index
                    }
                })
            .then((res)=>{
                console.log(res.data)
                if (res.data === "can not find such student by id"){
                    this.$message("无法找到该学生信息")
                } else if (res.data === "can not find such course by id"){
                    this.$message("无法找到课程")
                } else if (res.data === "can not find any student in course"){
                    this.$message("学生已退出课程")
                } else if (res.data === "the user have not joined any course"){
                    this.$message("您未加入任何课程")
                } else if (res.data === "the course does not have such student"){
                    this.$message("本课程中没有任何学生")
                } else if (res.data === "failed"){
                    this.$message("退课失败")
                } else if (res.data === "ok"){
                    this.$message("退课成功")
                } else {
                    this.$message("未知错误")
                }
            })
            this.course.push()
        }
    },

    created() {
        this.getUserData()
        // 设置休眠时间
        function sleep(time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }
        // 等待半秒后获取数据
        sleep(500).then(() => {
            this.getCourseData()
        })
    },
    mounted() {
        document.addEventListener('click', e => {
            if (!this.$el.contains(e.target)) {
                this.addOrJoinConfirm = false
                for (let i = 0; i < this.morePageShow.length; i++){
                    this.morePageShow[i] = false
                }
                this.morePageShow.push()
            }
        })

    },

    imgGenerate: function (id) {
        return require('../assets/IndexCourseImage/' + id + '.png')
    },
}
</script>

<style lang="scss" scoped>
#body {
    display: flex;
    flex-direction: column;

    width: 1341px;
    height: auto;

    margin: 0 auto;
}

#title {
    padding-top: 20px;
    padding-bottom: 20px;

    height: 40px;

    display: flex;
    flex-direction: row;

    box-shadow: 0 1px 0 0 rgba(226, 230, 237, 1);

    .el-button {
        background-color: #409eff !important;
        border-color: #409eff !important;
    }
}

#my_class {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    .course {
        display: flex;
        position: sticky;
        flex-direction: column;
        justify-content: flex-start;

        width: 270px;
        height: 273px;
        background: #fff;
        border: 1px solid #E2E6ED;
        border-radius: 8px;

        margin-bottom: 24px;
        margin-right: 60px;
        margin-top: 20px;

        .more_page{
            z-index: 1000;
            position: absolute;
            bottom: 36px;
            right: 10px;

            height: 180px;
            width: 128px;
            font-size: 14px;
            color: #2d2d2d;

            background: white;
            box-shadow: 1px 2px 3px rgba(0,0,0,.2);

            padding: 5px 0;

            div{
                padding-left: 23px;
                height: 30px;
                width: 105px;
                line-height: 30px;

                cursor: pointer;
                &:hover{
                    cursor: pointer;
                    background-color: #F6F6F6;
                }
            }
        }

        .course_img {
            border-radius: 8px;
            height: 152px;
            max-width: 100%;
            margin: 0 0;
            display: block;
            background: url("../assets/IndexCourseImage/1.png") no-repeat;

            strong {
                margin-top: 20px;
                display: block;
                font-size: 20px;
                font-weight: lighter;
                color: #fff;
                margin-left: 18px;
                margin-right: 48px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                &:hover {
                    cursor: pointer;
                    border-bottom: 1px solid #fff;
                }
            }

            .class_name {
                display: block;
                font-size: 16px;
                margin-left: 18px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 28px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .class_code {
                margin-left: 18px;
                font-size: 12px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 22px;
                margin-top: 20px;

                &:hover {
                    cursor: pointer;
                }
            }
        }

        .course_work {
            width: 270px;
            height: 90px;

            .course_work_title {
                font-size: 12px;
                font-weight: 500;
                color: rgba(95, 99, 104, 1);

                margin-left: 20px;
                margin-top: 20px;
            }

            .course_work_body {
                font-size: 14px;
                color: rgba(31, 32, 35, 1);
                font-weight: 500;

                margin-left: 20px;
                margin-top: 20px;
            }
        }

        .course_bottom {
            width: 270px;
            height: 31px;
            border-radius: 8px;

            display: flex;
            flex-direction: row;

            div {
                height: 31px;
                line-height: 31px;
            }

            .owner_head {
                width: 25px;
                height: 25px;
                margin-left: 20px;
                background: url("../assets/head_portrait/1.png") no-repeat;
                background-size: 100% 100%;
            }

            .owner_name {
                margin-left: 10px;

                font-size: 12px;
                font-weight: 500;
                color: rgba(95, 99, 104, 1);
            }

            .course_bottom_more {
                font-size: 12px;
                font-weight: 400;
                color: rgba(44, 88, 171, 1);

                margin-left: 10px;

                &:hover {
                    cursor: pointer;
                }
            }

            .cancel_top {
                margin-left: 110px;
                font-size: 12px;
                color: #A0A0A0;

                &:hover {
                    cursor: pointer;
                }
            }
        }
    }
}

#addOrJoinConfirm {
    display: block !important;
    position: absolute;
    left: 1062px;
    top: 132px;

    width: 150px;
    height: 80px;

    div {
        width: 150px;
        height: 38px;

        text-align: center;
        line-height: 38px;
        font-size: 16px;
        background-color: white;

        &:hover {
            background-color: #F6F6F6;
            cursor: pointer;
        }
    }
}

#joinCourseDialog {
    width: 40%;

    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
}

#addCourseDialog {
    .input {
        width: 460px;

        border: none;
        outline: none;
        background: none;
        cursor: text;

        font-size: 14px;

        border-bottom: 2px solid grey;

        padding: 8px;

        &:focus {
            border-bottom: 2px solid blue;
        }
    }
}
</style>
